<template>
  <div class="apply-wrap">
    <div class="bg-box">
      <div class="apply-btn" v-if="apply == 1">
        <button type="button" class="btn process1" @click="openModal">资格申请</button>
      </div>
      <div class="apply-btn" v-else-if="apply == 2">
        <button type="button" class="btn process2">审核中</button>
      </div>
      <div class="apply-btn" v-if="apply == 3">
        <button type="button" class="btn process1" @click="openModal">再次申请</button>
      </div>
    </div>
    <div class="tip-box">{{message}}</div>
    <!--日历组件-->
    <v-datetime :markDateMore="signList" signClass="sign" v-show="showCalendar" :passTime="passTime"></v-datetime>

    <!--规则-->
    <div class="rule-box">
      <div class="logo-box">
        <img src="./rule.png" class="rule" onclick="return false"/>
      </div>
      <div class="title-box">
        <p>1.目前仅有部分企业支持提前领工资。</p>
        <p>2.申请提前领工资，需要入职满八个工作日。</p>
        <p>3.申请资格后，需要驻厂老师审核，驻厂老师审核成功后，员工每日到驻厂老师指定的工厂位置进行考勤签到，就可以提前领工资，领取标准如下：每天签到成功后，在夜晚12点后系统自动发放100元到您的蓝聘账户上。</p>
        <p>4.驻厂老师每天会随机对考勤签到员工的上班情况进行检查，如发现弄虚作假者，不仅取消他提前领工资的资格，还会被系统拉入黑名单。</p>
      </div>
    </div>

    <!--提示语-->
    <v-alert v-model="sendVal" :content="content"></v-alert>

    <div class="phone-modal" v-show="showMask">
      <div class="phone-box">
        <div class="phone_title1">请输入姓名和身份证号</div>
        <div class="phone_con">
          <div class="phone_title distince">
            <input type="text" maxlength="11" class="number" v-model="name" placeholder="请输入姓名" @blur="inputBlur"/>
          </div>
          <div class="phone_title">
            <input type="text" maxlength="18" class="number" v-model="certNo" placeholder="请输入身份证号" @blur="inputBlur"/>
          </div>
        </div>
        <div class="btns">
          <div class="left-btn" @click="cancel">
            <button type="button" class="cancel">取消</button>
          </div>
          <div class="right-btn" @click="qualifiedApply">
            <button type="button" class="sure">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!--微信绑定手机号-->
    <v-phone v-model="showModal" @bindPhone="bindCustomerPhone"></v-phone>

  </div>
</template>

<script>
  import alert from "../../components/alert";
  import datetime from "../../components/calendar/datetime";
  import {getUrlKey, formatDate, setSessionStore, getSessionStore} from "../../config/util";
  import {baseUrl} from "../../config/env";
  import phone from "../../components/phone";

  export default {
    data() {
      return {
        apply: 0,
        sendVal: false,
        showMask: false,
        showTip: false,
        showCalendar: false,
        signList: [],
        name: "",
        certNo: "",
        message: "",
        content: "",
        type: "",
        userSign: "",
        msgType: "",
        passTime: "",
        remark: "",
        countentPhone: "",
        showModal: false
      }
    },
    mounted() {
      //获取微信
      this.userSign = getUrlKey("success");
      this.countentPhone = getUrlKey("countentPhone"); //手机框 0弹出1不弹出
      let base64 = require('js-base64').Base64;
      if (this.userSign != "" && this.userSign != "null" && this.userSign != null) {
        setSessionStore("success", base64.encode(this.userSign));
        this.userSign = base64.decode(getSessionStore("success"));
      }

      if (this.countentPhone == "0") {
        this.showModal = true;
      } else {
        this.type = getUrlKey("type");
        if (this.type == 1) {//资格申请
          this.apply = 1;
        } else if (this.type == 2) {//审核中
          this.apply = 2;
        } else if (this.type == 3) {//再次申请
          this.apply = 3;
        }
        if (getUrlKey("remark") != "" && getUrlKey("remark") != "null" && getUrlKey("remark") != null) {
          this.remark = decodeURI(getUrlKey("remark"));
          this.message = "拒绝理由：" + this.remark;
        } else {
          this.msgType = getUrlKey("msg");
          if (this.msgType == 1) {//日日薪
            this.message = "目前您的在职企业支持每日领工资， 所以您申请的是每日领工资。";
          } else if (this.msgType == 2) {
            this.message = "目前您的在职企业支持每周领工资， 所以您申请的是每周领工资。";
          }
        }
      }
    },
    methods: {
      bindCustomerPhone(phone) {//绑定微信客户手机号
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/wx_user/set_phone?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        //绑定微信手机
        this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.userSign + "&phone=" + phone + "&userName=" + "&userUrl=" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.type = getUrlKey("type");
            if (this.type == 1) {//资格申请
              this.apply = 1;
            } else if (this.type == 2) {//审核中
              this.apply = 2;
            } else if (this.type == 3) {//再次申请
              this.apply = 3;
            }
            if (getUrlKey("remark") != "" && getUrlKey("remark") != "null" && getUrlKey("remark") != null) {
              this.remark = decodeURI(getUrlKey("remark"));
              this.message = "拒绝理由：" + this.remark;
            } else {
              this.msgType = getUrlKey("msg");
              if (this.msgType == 1) {//日日薪
                this.message = "目前您的在职企业支持每日领工资， 所以您申请的是每日领工资。";
              } else if (this.msgType == 2) {
                this.message = "目前您的在职企业支持每周领工资， 所以您申请的是每周领工资。";
              }
            }
          } else {
            this.showModal = true;
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      checkBankCard() {//校验姓名和身份证
        var reg1 = /^[\u2E80-\u9FFF]+$/; //中文
        var reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/; //身份证
        if (this.name == "" || this.name == null) {
          this.$vux.toast.text("请输入姓名", "middle");
          return;
        } else if (!reg1.test(this.name)) {
          this.$vux.toast.text("请输入中文姓名", "middle");
          return;
        } else if (this.name.length > 6) {
          this.$vux.toast.text("姓名不能超过6个字", "middle");
          return;
        }
        if (this.certNo == "" || this.certNo == null) {
          this.$vux.toast.text("请输入身份证号", "middle");
          return;
        } else if (!reg2.test(this.certNo)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      openModal() {//打开身份证和姓名输入框
        this.showMask = true;
      },
      qualifiedApply() {//资格申请
        if (this.checkBankCard()) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {
            "userName": this.name,
            "userCardNumber": this.certNo
          };
          let time = (new Date()).getTime();
          let url = baseUrl + "/work_user/update_work_user?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          this.axios.post(baseUrl + "/work_user/update_work_user?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("资格申请失败,请重试", "middle");
              } else {
                this.showMask = false;
                this.apply = 2;
              }
            } else {
              this.showMask = false;
              if (resultObj.code == 20064) {
                this.sendVal = true;
                this.content = "经系统查询，您的入职日期尚未满八个正常工作日，不能进行资格申请，如果信息错误，请联系所在厂的驻厂老师进行修改。或联系客服人员，帮您处理。";
              } else if (resultObj.code == 20065) {
                this.sendVal = true;
                this.content = "经系统查询，您的入职日期尚未满八个正常工作日，不能进行资格申请，如果信息错误，请联系所在厂的驻厂老师进行修改。或联系客服人员，帮您处理。";
              } else if (resultObj.code == 20066) {
                this.$vux.toast.text("不要重复申请,请等待审核!", "middle");
              } else if (resultObj.code == 20067) {
                this.sendVal = true;
                this.content = "经系统查询，您尚未入职或者您所在的企业暂不支持提前领工资，不能进行资格申请，如果信息错误，请联系所在厂的驻厂老师进行修改。或联系客服人员，帮您处理。";
              } else {
                this.$vux.toast.text(resultObj.msg, "middle");
                return;
              }
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      querySignList() {//查询员工签到详情
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_user/get_user_sign?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_user/get_user_sign?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            let day = resultObj.data.day;
            let money = resultObj.data.money;
            this.passTime = formatDate(new Date(resultObj.data.time), "yyyy-MM-dd");
            this.message = `本月已签到${day}天，已提前领取${money}元工资！`;
            if (resultObj.data.list != null && resultObj.data.list.length > 0) {
              for (var i = 0, length = resultObj.data.list.length; i < length; i++) {
                this.signList.push(resultObj.data.list[i].workTime);
              }
              this.showCalendar = true;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      cancel() {
        this.showMask = false;
      }
    },
    components: {
      "v-alert": alert,
      "v-datetime": datetime,
      "v-phone": phone
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .apply-wrap
    wh(100%, auto)
    .bg-box
      position: relative
      margin: 0 auto
      wh(96.67%, 5.467rem)
      bg-image("../daymoney/bg.png", 100%, 100%)
      .apply-btn
        position: absolute
        wh(4.44rem, 1.147rem)
        border-radius(0.573rem)
        bottom: -0.4rem
        left: 0
        right: 0
        margin: auto
        .btn
          border-radius: 0.573rem
          wh(4.44rem, 1.147rem)
          size-color(0.507rem, rgba(255, 255, 255, 1))
          font-weight: 500
          line-height: 1.147rem
        .process1
          background: linear-gradient(0deg, rgba(250, 171, 28, 1), rgba(255, 196, 89, 1))
          box-shadow: 0rem 0.053rem 0.093rem 0rem rgba(223, 144, 0, 0.32)
        .process2
          background: rgba(197, 188, 172, 1);
    .tip-box
      fj(center, center)
      margin: 0 auto
      wh(90%, auto)
      size-color(0.4rem, rgba(255, 96, 96, 1))
      font-weight: 500
      margin-top: 0.75rem
      margin-bottom: 0.5rem
    .rule-box
      margin: 0 auto
      background: rgba(234, 246, 255, 1)
      border-radius(0.133rem)
      wh(94.67%, 8.8rem)
      margin-bottom: 0.2rem
      .logo-box
        margin: 0 auto
        wh(5.467rem, 0.44rem)
        padding-top: 0.587rem
        margin-bottom: 0.533rem
        .rule
          wh(100%, 100%)
      .title-box
        width: 96%
        margin: 0 auto
        size-color(0.347rem, #666666)
        p
          line-height: 0.4rem
          margin-bottom: 0.267rem
          &:nth-child(4)
            margin-bottom: 0.24rem
    .phone-modal
      modal(fixed, 100, 0.5);
      .phone-box
        position: absolute;
        wh(8rem, 6.16rem);
        background: rgba(255, 255, 255, 1);
        border-radius(0.173rem);
        box-sizing: border-box;
        .phone_title1
          text-align: center
          margin-top: 0.533rem;
          margin-bottom: 0.693rem;
          size-color(0.48rem, #1B1B1B);
        .phone_con
          margin: 0 auto;
          wh(7.387rem, 2.52rem);
          margin-bottom: 0.75rem;
          .phone_title
            fj(space-between, center);
            wh(100%, 1rem);
            .number
              flex: 1
              height: 1rem;
              border: 1px solid rgba(198, 198, 198, 1)
              border-radius(0.08rem)
              size-color(0.44rem, #666666)
              padding-left: 0.24rem
          .distince
            margin-bottom: 0.52rem;
        .btns
          display: flex
          wh(100%, 1.187rem)
          border-top: 1px solid rgba(230, 230, 230, 1)
          .left-btn
            wh(50%, 1.173rem)
            border-right: 1px solid rgba(230, 230, 230, 1)
            .cancel
              border-bottom-left-radius: 0.173333rem
              wh(100%, 1.173rem)
              line-height: 1.173rem
              size-color(0.44rem, rgba(146, 146, 146, 1))
              background: #FFF
          .right-btn
            wh(50%, 1.173rem)
            .sure
              border-bottom-right-radius: 0.173333rem
              wh(100%, 1.173rem)
              line-height: 1.173rem
              size-color(0.44rem, rgba(60, 175, 255, 1))
              background: #FFF
    .calendar-item >>> .sign
      position: relative
      border: 1px solid rgba(60, 175, 255, 1)
      border-radius(50%)
</style>

